<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
    <style>
      #viewport{
        width: 800px;
        height: 500px;
        border: 1px solid gray;
        overflow: hidden;
        position: relative;
      }
      #ctl{
        position: absolute;
        width: 10px;
        height: 5px;
        opacity: 0;
        background-color: red;
      }
      #canvas{
        position: absolute;
        width: 10px;
        height: 5px;
        background-color: red;
      }
      #node,#edges,#controlNode{
        position: absolute;
      }
      .rect{
        width: 40px;
        height: 30px;
        background-color: green;
        position: absolute;
      }
      [data-draging="draging"]{
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="viewport">
      <div id="ctl"></div>
      <div id="canvas">
        <!-- 节点 -->
          <div id="nodes">
            <div class="rect" data-id="1" data-type="node"></div>
            <div class="rect" data-id="2"  data-type="node"></div>
          </div>
          <!-- 边 -->
          <div id="edges"></div>
          <!-- 控制点 -->
          <div id="controlNode"></div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
